<template>
	<view class="structure-list">
		<view class="details-box" v-for="(item,index) in dataList" :key='item.id'>
			<view class="details-box-line">
				<view>
					2024/09/23
				</view>
				<view v-if='item.isShow' @click="dataList[index].isShow=false">
					<text>收起详情</text>
					<image src="@/static/images/list/up.png" mode=""></image>
				</view>
			</view>
			<view class="data-item-box-container">
				<view class="data-item-box">
					<view class="font-color-light text-left">
						锁仓总额
					</view>
					<view class="font-color-bk-30 text-left" style="margin-top: 10rpx;">
						9999.00
					</view>
				</view>

				<view class="data-item-box">
					<view class="font-color-light text-left">
						等级
					</view>
					<view class="font-color-bk-30 text-left" style="margin-top: 10rpx;">
						主管
					</view>
				</view>

				<view class="data-item-box">
					<view class="font-color-light text-left">
						释放金额
					</view>
					<view class="font-color-bk-30 text-left" style="margin-top: 10rpx;">
						35689
					</view>
				</view>
			</view>

			<view class="adjust-box" v-if="!item.isShow" @click="dataList[index].isShow=true">
				<view class="adjust-box-details">
					展开下级团队详情
				</view>
				<image src="@/static/images/list/down.png" mode=""></image>
			</view>

			<view class="ajust-box-show">
				<view class="data-item-box-container">
					<view class="data-item-box">
						<view class="font-color-light text-left">
							团队锁仓总额
						</view>
						<view class="font-color-bk-30 text-left" style="margin-top: 10rpx;">
							99999756.00
						</view>
					</view>

					<view class="data-item-box">
						<view class="font-color-light text-left">
							团队释放金额
						</view>
						<view class="font-color-bk-30 text-left" style="margin-top: 10rpx;">
							99756.00
						</view>
					</view>

				</view>
			</view>

			<view style="margin-top: 20rpx;" v-if='item.isShow'>
				<tui-table borderWidth='0' :borderTop='false' :borderLeft='false' :borderBottom='false'
					:borderRight='false'>
					<tui-tr>
						<tui-td :borderTop='false' :borderLeft='false' :borderBottom='false' :borderRight='false' bold
							v-for="(item,index) in header" :key="index" :span="8" :size="24">{{item.title}}</tui-td>
					</tui-tr>

					<tui-tr :borderTop='false' :borderLeft='false' :borderBottom='false' :borderRight='false'
						v-for="(item, index) in item.listData" :key="index">
						<tui-td :borderTop='false' :borderLeft='false' :borderBottom='false' :borderRight='false'
							:span="8" v-for="(obj, idx) in header" :key="idx" :size="24">{{item[obj.key]}}</tui-td>
					</tui-tr>
				</tui-table>
			</view>
		</view>
		
		<backOff/>
	</view>
</template>

<script setup>
import backOff from '../../components/custom/backOff.vue';
import { ref } from 'vue';
	const dataList = ref([
		{
			id:'001',
			listData: [
				{
					id: 1,
					name: '张三',
					time: '2024.09.18',
					price: '236'
				},
				{
					id: 2,
					name: '里斯',
					time: '2024.09.18',
					price: '236'
				},
				{
					id: 3,
					name: '王五',
					time: '2024.09.18',
					price: '236'
				}
			],
			isShow:false
		},
		{
			id:'002',
			listData: [{
					id: 1,
					name: '张三',
					time: '2024.09.18',
					price: '236'
				},
				{
					id: 2,
					name: '里斯',
					time: '2024.09.18',
					price: '236'
				},
				{
					id: 3,
					name: '王五',
					time: '2024.09.18',
					price: '236'
				}
			],
			isShow:false
		},
		{
			id:'003',
			listData: [{
					id: 1,
					name: '张三',
					time: '2024.09.18',
					price: '236'
				},
				{
					id: 2,
					name: '里斯',
					time: '2024.09.18',
					price: '236'
				},
				{
					id: 3,
					name: '王五',
					time: '2024.09.18',
					price: '236'
				},
			],
			isShow:true
		},
	])


	const header = [{
			title: '姓名/ID',
			key: 'name'
		},
		{
			title: '时间',
			key: 'time'
		},
		{
			title: '释放金额',
			key: 'price'
		}
	]
	const listData = [{
			id: 1,
			name: '张三',
			time: '2024.09.18',
			price: '236'
		},
		{
			id: 2,
			name: '里斯',
			time: '2024.09.18',
			price: '236'
		},
		{
			id: 3,
			name: '王五',
			time: '2024.09.18',
			price: '236'
		}
	]
	
</script>

<style scoped lang="scss">
	.structure-list {
		min-height: 100%;
		width: 100%;
		background: #F7FBFA;
		padding: 30rpx;
		box-sizing: border-box;

		.details-box {
			margin-top: 20rpx;
			width: 100%;
			background: #FFFFFF;
			padding: 30rpx;
			box-sizing: border-box;
			box-shadow: 0px 0px 11px 0px rgba(49, 212, 157, 0.19);
			border-radius: 16px;

			.details-box-line {
				display: flex;
				align-items: center;
				justify-content: space-between;

				view:nth-child(1) {
					font-weight: 400;
					font-size: 24rpx;
					color: #202327;
				}

				view:nth-child(2) {
					font-weight: 400;
					font-size: 24rpx;
					color: #31D49D;
					display: flex;
					align-items: center;
				}

				image {
					width: 30rpx;
					height: 30rpx;
				}
			}
		}

		.data-item-box-container {
			display: flex;
			margin-top: 40rpx;
		}

		.adjust-box {
			display: flex;
			align-items: center;
			margin-top: 24rpx;
			justify-content: center;

			.adjust-box-details {
				font-weight: 400;
				font-size: 24rpx;
				color: #31D49D;
			}

			&>image {
				width: 30rpx;
				height: 30rpx;
				margin-left: 6rpx;
			}



		}

		.ajust-box-show {
			border-top: 1rpx solid #E3E3E3;
			margin-top: 40rpx;
		}

		.data-item-box {
			text-align: center;
			flex: 1;

			view:first-child {
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 24rpx;
				color: rgba(255, 255, 255, 0.7);
			}

			view:nth-child(2) {
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 36rpx;
				color: #FFFFFF;
				// text-align: left;
			}
		}

		.text-left {
			text-align: left !important;
		}

		.font-color-light {
			font-weight: 400 !important;
			font-size: 24rpx !important;
			color: #C2C2C2 !important;
		}

		.font-color-bk-30 {
			font-weight: 600 !important;
			font-size: 30rpx !important;
			color: #202327 !important;
		}

		.tui-table__row {
			border: none !important;
		}

		.tui-table__row:nth-child(2n+1) {
			background: #EFEFEF !important;
		}
	}
</style>